<template>
    <!-- <van-cell v-for="(comments, index) in list" :key="index"> -->
    <van-cell>
        <!-- 头像 -->
        <van-image
            slot="icon"
            class="avatar"
            fit="cover"
            round
            :src="comments.aut_photo"
        />
        <div slot="title">
            <div class="title-wrap">
                <!-- 用户名 -->
                <div class="name">{{ comments.aut_name }}</div>

                <!-- 点赞按钮 -->
                <div class="like-wrap" @click="onCommentLike">
                    <van-icon
                        class="like-btn"
                        :class="{
                            liked: comments.is_liking
                        }"
                        :name="comments.is_liking ? 'good-job' : 'good-job-o'"
                    />
                    <span class="like-count">{{ comments.like_count }}</span>
                </div>
            </div>

            <!-- 评论内容 -->
            <div class="content">{{ comments.content }}</div>

            <!-- 评论时间 -->
            <div>
                <span class="pubdate">{{
                    comments.pubdate | formatTime('MM-DD HH:mm')
                }}</span>

                <van-button
                    size="mini"
                    round
                    class="reply-btn"
                    @click="$emit('reply-click', comments)"
                    >{{ comments.reply_count }} 回复</van-button
                >
            </div>
        </div>
    </van-cell>
</template>

<script>
import { addCommentLike, deleteCommentLike } from '@/api/comment'

export default {
    components: {},
    props: {
        comments: {
            type: [String, Number, Object],
            required: true
        }
        // list: {
        //     type: Array,
        //     required: true
        // }
    },
    data () {
        return {

        }
    },
    created () {
    },
    computed: {},
    methods: {
        // 评论点赞
        async onCommentLike () {
            const commentId = this.comments.com_id.toString()
            if (this.comments.is_liking) {
                // 已点赞，取消点赞
                await deleteCommentLike(commentId)
                this.comments.like_count--
            } else {
                // 未点赞，点击点赞
                await addCommentLike(commentId)
                this.comments.like_count++
            }
            this.comments.is_liking = !this.comments.is_liking
        }
    },
    watch: {}
}
</script>

<style scoped>
.avatar {
    width: 36px;
    height: 36px;
    margin-right: 13px;
}
.name {
    font-size: 14px;
    color: #406599;
}
.content {
    font-size: 16px;
    color: #222;
}
.pubdate {
    font-size: 10px;
    margin-right: 15px;
}
.title-wrap {
    display: flex;
    justify-content: space-between;
}
.like-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.like-btn {
    font-size: 15px;
}
.liked {
    color: orange;
}
.reply-btn {
    width: 50px;
}
</style>
